<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<button id="btnMinus">-</button>
	<span id="count">0</span>
	<button id="btnAdd">+</button>
	<script>
		//DOM4步骤
		//1.查找触发事件的元素。本例中：点击+按钮
		var btnAdd = document.getElementById("btnAdd");
		//2.绑定事件处理函数。
		btnAdd.onclick = function () {
			//3.查找要修改的元素。
			var count = document.getElementById("count");
			//4.修改找到的元素。获取内容，转为整数
			let n = parseInt(count.innerHTML);
			n++;
			count.innerHTML = n; //再把n值放回去
		};

		//以下实现的减号按钮的交互操作
		//1.查找触发事件的元素。本例中：点击-按钮
		var btnMinus = document.getElementById("btnMinus");
		//2.绑定事件处理函数。
		btnMinus.onclick = function () {
			//3.查找要修改的元素。
			var count = document.getElementById("count");
			//4.修改找到的元素。获取内容，转为整数
			let n = parseInt(count.innerHTML);
			n--;
			count.innerHTML = n; //再把n值放回去
		};		 
	</script>
</body>

</html>